<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
        <el-form :model="addBasePermissionForm" ref="addBasePermissionRef" :rules="addBasePermissionrules">
            <el-checkbox v-for="item in list" :value="item.id" v-model="item.checked" :label="item.name"
                style="width:140px"></el-checkbox>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="save()">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";

export default {
    name: "AddBasePermission",
    components: { ElForm, ElMessage },
    data() {
        return {
            list: [],
            uId: 0,
            dialogFormVisible: ref(false),
            formLabelWidth: "120px",
            title: "",
            personnelType: "",
            addBasePermissionForm: {
                url: "",
                name: "",
                parentId: "",
                detail: "",
                sortNum: "",
            },
            // 校验规则
            addBasePermissionrules: {
                url: vxRule(true, null, "blur"),
                name: vxRule(true, null, "blur"),
                detail: vxRule(true, null, "blur"),
            },
        };
    },
    methods: {
        closeDialog() {
            this.clear();
        },
        cancel() {
            this.dialogFormVisible = false;
            this.clear();
        },

        getBasePermission(id) {
            httpService("/javaApi/baseRole/queryAllUserRole/" + id, {}, "get").then(
                (data) => {
                    this.list = data;
                    this.uId = id;
                }
            );
        },
        clear() {
            this.dialogFormVisible = false;
            //清空form
            this.addBasePermissionForm.id = "";
            this.addBasePermissionForm.url = "";
            this.addBasePermissionForm.name = "";
            this.addBasePermissionForm.parentId = "";
            this.addBasePermissionForm.detail = "";
            this.addBasePermissionForm.sortNum = "";
        },
        save() {

            this.$refs.addBasePermissionRef.validate((valid) => {
                if (valid) {
                    let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
                    params.append("uId", this.uId);
                    let rIds = [];
                    for (let i = 0; i < this.list.length; i++) {
                        if (this.list[i].checked) {
                            rIds.push(this.list[i].id)
                        }
                    }
                    params.append("rIds", rIds);

                    httpService("/javaApi/baseRole/addUserRole", params, "post").then(
                        (data) => {
                            if (data.code == 200) {
                                ElMessage.success("保存成功");
                                this.clear();
                            } else {
                            }
                        }
                    );
                } else {
                    return false;
                }
            });
        },
    },
};
</script>
<style>

</style>